/* 用户信息 */
<template>
  <div class="app-container user-info">
    <el-card shadow="never" class="box-card">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
      <div class="text item">
        <table>
          <tr>
            <td style="background-color: gainsboro;width:300px" rowspan="6">
              <el-image :src="infoData.avatar" class='user-head'/>
              <p>{{infoData.nick}}</p>
              <p>ID号：{{infoData.catCode}}</p>
              <p>状态：{{infoData.isOnline===0?'在线':'离线'}}</p>
            </td>
            <td style="background-color: gainsboro;width:200px">用户账号</td>
            <td style="width:20%">{{infoData.accountName}}</td>
            <td style="background-color: gainsboro;width:200px">注册时间</td>
            <td>{{infoData.createTime}}</td>
          </tr>
          <tr>
            <td style="background-color: gainsboro;">注册设备及设备号</td>
            <td>{{infoData.device}}</td>
            <td style="background-color: gainsboro;">联系方式</td>
            <td>{{infoData.phone}}</td>
          </tr>
          <tr>
            <td style="background-color: gainsboro;">性别</td>
            <td>{{infoData.sex === 1?'男':'女'}}</td>
            <td style="background-color: gainsboro;">用户等级</td>
            <td>{{infoData.userLevel||'VIP0'}}（经验值：{{infoData.exp || 0}}）</td>
          </tr>
          <tr>
            <td style="background-color: gainsboro;">出生年月</td>
            <td>{{infoData.birthDay}}</td>
            <td style="background-color: gainsboro;">地区</td>
            <td>{{infoData.area}}</td>
          </tr>
          <tr>
            <td style="background-color: gainsboro;">个性签名</td>
            <td>{{infoData.signature}}</td>
            <td style="background-color: gainsboro;">TA的相册</td>
            <td>{{infoData.albumList?'已上传':'未上传'}}</td>
          </tr>
          <tr>
            <td style="background-color: gainsboro;">用户标签</td>
            <td>
              <span v-for="lable in infoData.labelList" :key="lable">
                {{lable}}
              </span>
            </td>
            <td style="background-color: gainsboro;">归属渠道</td>
            <td>{{infoData.channelId}}</td>
          </tr>
        </table>
      </div>
    </el-card>

    <el-card shadow="never" class="box-card">
      <div slot="header" class="clearfix">
        <span>个人数据</span>
      </div>
      <div class="text item">
        <table>
          <tr style="background-color: gainsboro;">
            <td>消费金额</td>
            <td>订单数量</td>
            <td>可用猫币</td>
            <td>猫粮</td>
            <td>优惠券（张）</td>
            <td>登录次数</td>
            <td>订阅聊天室</td>
            <td>在线总时长</td>
          </tr>
          <tr>
            <td>￥{{infoData.amount || 0}}</td>
            <td>{{infoData.orders || 0}}</td>
            <td>{{infoData.catCoinBalance || 0}}</td>
            <td>{{infoData.balance || 0}}</td>
            <td>{{infoData.vouchers || 0}}</td>
            <td>{{infoData.logs || 0}}</td>
            <td>{{infoData.rooms || 0}}</td>
            <td>{{infoData.onlineTimes || 0}}小时</td>
          </tr>
          <tr style="background-color: gainsboro;">
            <td>累计充值</td>
            <td>首次充值时间</td>
            <td>关注用户</td>
            <td>粉丝用户</td>
            <td>好友数</td>
            <td>关注圈子</td>
            <td>荧光棒</td>
            <td>宠爱值余额</td>
          </tr>
          <tr>
            <td>￥{{infoData.recharges || 0}}</td>
            <td>{{infoData.rechargeTime}}</td>
            <td>{{infoData.attentionUsers || 0}}</td>
            <td>{{infoData.fansUsers || 0}}</td>
            <td>{{infoData.friends || 0}}</td>
            <td>{{infoData.circles || 0}}</td>
            <td>{{infoData.lightStick || 0}}</td>
            <td>{{infoData.petValueBalance || 0}}</td>
          </tr>
          <tr style="background-color: gainsboro;">
            <td>提现次数</td>
            <td>累计提现</td>
            <td>守护</td>
            <td>加入群聊</td>
            <td>Ta的收入</td>
            <td>Ta的徽章</td>
          </tr>
          <tr>
            <td>{{infoData.withdrawals || 0}}</td>
            <td>￥{{infoData.withdrawalAmount || 0}}</td>
            <td>{{infoData.guards || 0}}</td>
            <td>{{infoData.groupChats || 0}}</td>
            <td>￥{{infoData.incomes || 0}}</td>
            <td>{{infoData.badges || 0}}</td>
          </tr>
        </table>
      </div>
    </el-card>

    <el-card shadow="never" class="box-card">
      <div slot="header" class="clearfix">
        <span>认证信息</span>
      </div>
      <div class="text item">
        <el-table :data="infoData.realAuth">
          <el-table-column label="真实姓名" align="center" prop="name" />
          <el-table-column label="身份证" align="center" prop="card" />
          <el-table-column label="支付宝" align="center" prop="aliPay" />
          <el-table-column label="手持证件半身照" align="center" prop="photo" />
        </el-table>
      </div>
    </el-card>
    
  </div>
</template>

<script>
import { getCatUserAccountInfo } from "@/api/system/catUserAccount";

export default {
  data() {
    return {
      infoData:{}
    };
  },
  created() {
  },
  methods: {
    init(userId){
      this.$nextTick(() => {
        getCatUserAccountInfo(userId).then(response => {
          this.infoData = response.data;
        });
      })
    }
  }
};
</script>
<style>
.user-info table{
  border-spacing: inherit;
  border-collapse: collapse;
  width: 100%;
}
.user-info table tr td{
  border: 1px solid ;
  text-align: center;
  padding: 15px 0px;
}
.user-head{
      width: 150px;
    height: 150px;
    margin-top: 20px;
    border-radius: 20px;
}
.head-div{
  background-color: gainsboro;
  text-align: center;
  padding: 2px;
  border: 1px solid;
  border-right: 0;
}
</style>
